<template>
  <div>
    <h3>就地复用策略</h3>
    <ul>
      <!-- key值绑定index相当于没绑定key值 -->
      <li v-for="(item, index) in arr" :key="index">
        {{item}} == {{index}}
      </li>
     <button @click="fn">新来的</button> 
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['老大', '老二', '老三']
    }
  },
  methods: {
    fn() {
      // 数组里加一项
      // arr.splice(从哪开始, 删除几个, 添加项1, 添加项2....)
      this.arr.splice(1,0, '新来的')
    }
  }
}
</script>

<style>

</style>